<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601568 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="474"/>
<h1>15-DOM高级操作</h1>
<div>
<table bgcolor="#D4DDE5" border="0">
<tr><td><b>创建时间：</b></td><td><i>2018/5/8 9:42</i></td></tr>
<tr><td><b>更新时间：</b></td><td><i>2020/4/24 11:03</i></td></tr>
<tr><td><b>作者：</b></td><td><i>18081003141@163.com</i></td></tr>
</table>
</div>
<br/>

<div>
<span><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div style="text-align: center;"><span style="font-size: 18pt; color: rgb(255, 122, 116); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">运动</span></div><div style="text-align: center;"><div><br clear="none" style="font-size: 12pt;"/></div></div><div style="text-align: center;"><div><br clear="none" style="font-size: 12pt;"/></div></div><div style="text-align: center;"><img src="00-笔记_files/20120613215531_NY3sd.thumb.700_0.gif" type="image/gif" data-filename="20120613215531_NY3sd.thumb.700_0.gif" style="height: auto; font-size: 12pt;" width="397"/></div><div style="text-align: center;"><div><br clear="none" style="font-size: 12pt;"/></div></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="text-align: center;"><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;"> </span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">运动实例： </span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; color: rgb(255, 122, 116); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">运动基础：</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">让DIV动起来  定时器的使用：     </span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;"> </span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">DIV终止，判断时候到终点；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; color: rgb(255, 122, 116); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">速度</span><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">&gt;&gt;&gt;&gt;&gt;speed</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">核心代码：</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-family: 'Yu Gothic UI';"><span style="font-size: 12pt;">if(offsetLeft&gt;=300){</span></span></div><div><span style="font-family: 'Yu Gothic UI';"><span style="font-size: 12pt;">     clear..</span></span></div><div><span style="font-size: 12pt;">   //<span style="font-family: 'Yu Gothic UI'; color: #333333;">定时器的清零。</span></span></div><div><br clear="none"/></div><div><span style="font-family: 'Yu Gothic UI';"><span style="font-size: 12pt;">}else{</span></span></div><div><span style="font-family: 'Yu Gothic UI';"><span style="font-size: 12pt;">     left++</span></span></div><div><span style="font-family: 'Yu Gothic UI';"><span style="font-size: 12pt;">}</span></span></div></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">定时器：动画既要不卡顿又不能浪费太多性能，一般选择30毫秒时间间隔</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">运动中点击加速问题：因为每次点击都开启了一个新的定时器，多个定时器叠加的结果造成了加速</span></div><div><span style="font-size: 12pt;">解决方案：每次点击的时候把上一次开启的定时器先清除，并且timer此时必须修改为全局变量以确保能够清除上一次的定时器</span></div><div><br clear="none"/></div><div>异步：js单线程，异步代码单独执行</div><div><br/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; color: rgb(255, 122, 116); font-family: &quot;Yu Gothic UI&quot;;">缓冲运动：</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="text-align: center;"><img src="00-笔记_files/sGnY-fxqnskh1048668.gif" type="image/gif" data-filename="sGnY-fxqnskh1048668.gif" style="height: auto; font-size: 12pt;" width="308"/></div><div style="text-align: center;"><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">距离终点越近，速度越小</span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">根据距离计算速度；距离和速度成正比；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">speed = 距离终点的距离/10 ；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">0.5px发生什么：向上取整。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">speed=speed&gt;0?Math.ceil(speed):Math.floor(speed);</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">这句代码是什么意思呢？请看下表</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">比如元素从左往右运动，left值从0加到100，运用如上公式的话，结果会是这样</span></div><div><br clear="none"/></div><div><div><br/></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 130px;"></col><col style="width: 315px;"></col><col style="width: 205px;"></col></colgroup><tbody><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>步数</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div>这一步运动的距离（速度）</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>剩下的距离</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>1</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(100/10) = 10</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>90</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>2</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(90/10) = 9</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>81</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>3</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(81/10) = 9</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>72</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>4</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(72/10) = 8</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>64</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>5</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(64/10) = 7</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>57</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>...</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div>...</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>...</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>18</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(11/10) = 2</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>9</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>19</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(9/10) = 1</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>8</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>20</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(8/10) = 1</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>7</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div>...</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div>...</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>...</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div><br clear="none"/></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(2/10) = 1</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>1</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div><br clear="none"/></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 315px; padding: 8px;"><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">Math.ceil(1/10) = 1</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 205px; padding: 8px;"><div>0</div></td></tr></tbody></table><div><br clear="none"/></div></div><div><br clear="none"/></div><div><font style="font-size: 16pt;"><span style="font-size: 16pt; font-weight: bold;">练习</span></font></div><div><font style="font-size: 12pt;"><br/></font></div><div><span style="font-size: 12pt;">1、筋斗云效果</span></div><div><font style="font-size: 12pt;"><br clear="none"/></font></div><div><span style="font-size: 12pt;">2、封装</span></div><div><font style="font-size: 12pt;"><br clear="none"/></font></div><div><span style="font-size: 12pt;">3、侧边栏效果</span></div><div><font style="font-size: 12pt;"><br/></font></div><div><span style="font-size: 12pt;">4、焦点图淡入淡出</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div></span>
</div></body></html> 